<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
<style>
    #container {
        width: 300px;
        height: 300px;
        display: none;
    }
    
    .box {
        width: 400px;
        height: 900px;
        background-color: aqua;
    }
    
    html,
    body {
        position: relative;
        height: 100%;
    }
    
    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
    }
    
    .swiper {
        width: 100%;
        height: 200px;
    }
    
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .center {
        position: relative;
        height: 600px;
        background-color: red;
        margin-top: 50px;
    }
    
    ul {
        width: 80px;
        height: 300px;
        list-style: none;
        background-color: burlywood;
    }
    
    li {
        text-align: center;
        display: inline-block;
        width: 80px;
        height: 50px;
        background-color: aqua;
    }
    
    .box2 {
        position: absolute;
        right: -50px;
        top: 0;
        width: 300px;
        height: 500px;
        display: none;
    }
    
    .block {
        display: block;
    }
    
    .none {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 5;
        width: 400px;
        height: 250px;
        background-color: rgb(0, 136, 255);
        display: none;
    }
    
    .aa {
        width: 150px;
        height: 100px;
    }
    
    .button {
        width: 300px;
        height: 80px;
        background-color: #000;
        margin: auto;
    }
</style>

<body>
    <div id="container"></div>

    <div class="box">
        <h2 onclick="d()">郑州吾悦广场</h2>
        <h3 style="color: #fff;" onclick="none()">公告</h3>
        <div class="swiper mySwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="./1.png" alt=""></div>
                <div class="swiper-slide"><img src="./2.png" alt=""></div>
                <div class="swiper-slide"><img src="./3.png" alt=""></div>
                <div class="swiper-slide"><img src="./1.png" alt=""></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>



        <div class="center">

            <ul>
                <li>招牌烤鱼</li>
                <li>专属虾锅</li>
                <li>特色烧烤</li>
                <li>小吃炸货</li>
            </ul>

            <div class="box2 block">招牌烤鱼</div>

            <div class="box2">专属虾锅</div>
            <div class="box2">特色烧烤</div>
            <div class="box2">小吃炸货</div>
            <div class="none">
                <h2 style="text-align: center;">公告</h2>
                <p>客官:请适度点餐，光盘行动拒绝浪费，使用公勺公。</p>
                <button style="margin: auto;display: block;" onclick="none_A()">我知道了</button>
            </div>
        </div>

        <div class="button">
            <h3 style="color: #fff;" class="zj">$0.00</h3>
            <button onclick="tz()">选好了</button>
        </div>

    </div>


    <div style="position: fixed; top: 30px;left: 50%;background-color: aqua;" class="i">
        <h1>菜品详情</h1>
    </div>


</body>

<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode: "e1ba8abc7c2c986f2db538c973c96dd1",
    };
</script>
<script src="https://webapi.amap.com/loader.js"></script>
<script type="text/javascript">
    AMapLoader.load({
            key: "99100092bd8ec3189ed057cdd4d17aa5", //申请好的Web端开发者 Key，调用 load 时必填
            version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
        })
        .then((AMap) => {

            const map = new AMap.Map("container", {
                zoom: 20, //地图级别
                center: [113.428155, 34.774258], //地图中心点
                mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式
                viewMode: "2D", //设置地图模式
            });
            //创建一个 Marker 实例：
            const marker = new AMap.Marker({
                position: new AMap.LngLat(113.428155, 34.774258), //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                title: "郑州",
            });
            //将创建的点标记添加到已有的地图实例：
            map.add(marker);
        })
        .catch((e) => {
            console.error(e); //加载错误提示
        });
</script>

<!-- Swiper JS -->

<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js">
</script>
<!-- Initialize Swiper -->
<script>
    var swiper = new Swiper(".mySwiper", {
        slidesPerView: 3,
        spaceBetween: 30,
        freeMode: true,
        loop: true,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
    });
</script>


<script>
    //tab切换
    // $('li').click(function() {
    //     // var div = document.querySelectorAll('.box2')
    //     // div.classList.remove("block")
    //     $('.box2').hide()

    //     $('.box2').eq()

    // })
    var obj = [{
        id: 1,
        name: '青花椒烤鱼',
        price: 79,
        img: `https://img2.baidu.com/it/u=343874760,992484489&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1740243600&t=ad3cee8bafb057a62965014affcc6a76`,
        num: 1,
    }, {
        id: 2,
        name: '咖喱给烤鱼',
        price: 99,
        img: 'https://img0.baidu.com/it/u=672989157,3486790832&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067',
        num: 1,
    }, ]

    var arr = []
        //渲染
    function apply() {
        $('.block').html(``)
        obj.forEach(item => {
            $('.block').append(`
              <br>
            <img src="${item.img}" alt="" class="aa" onclick="xq(${item.id})">
             <h4>${item.name}</h4>
            <h4>$${item.price}</h4>
             <button onclick="add(${item.id})">+</button> <span>${item.num}</span> <button onclick="j(${item.id})">-</button>
            `)
        })

    }
    apply()

    //数量加

    var bb



    function add(id) {

        var a = obj.find(item => item.id == id)
        var z = 1
        z++
        console.log(z);

        var bb = z * a.price
        console.log(bb);

        $('.zj').html(`$${bb}`)
        console.log(z);

        $('span').html(`${a.num++}`)
        arr.push(a)
        console.log(arr);

        sessionStorage.setItem('data', JSON.stringify(arr))

        apply()
    }
    //数量剪
    function j(id) {
        var a = obj.find(item => item.id == id)

        if (a.num != 1) {
            var z = 1
            z--
            var bb = z * a.price
            console.log(bb);
            $('.zj').html(`$${bb}`)
            console.log(z);
            $('span').html(`${a.num--}`)
            apply()
        }
    }



    //跳转
    function tz() {
        location.assign('./结账.html')
    }

    //详情
    function xq(id) {
        obj.forEach(item => {
            if (item.id == id) {
                $('.i').append(`
              <br>
            <img src="${item.img}" alt="" class="aa" onclick="xq(${item.id})">
             <h4>${item.name}</h4>
            <h4>${item.price}</h4>
           
            `)
            }

        })

    }



    function none() {
        $(".none").show()
    }

    function none_A() {
        $(".none").hide()
    }



    function d() {
        $('#container').show()
    }
</script>

</html>